<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- 顶部导航栏 -->
    <header class="top-nav">
        <a href="index.html" class="logo">
            <img src="logo.png" alt="多语言旅行助手品牌标识" height="32">
        </a>
        <div class="language-selector">当前语言</div>
        <button class="menu-btn">
            <img src="menu-icon.png" alt="菜单图标" width="24" height="24">
        </button>
    </header>

    <!-- 内容区 -->
    <main class="content profile-content">
        <div class="user-info">
            <img src="user-avatar.png" alt="用户头像" class="avatar">
            <h2>用户名</h2>
            <p>邮箱: user@example.com</p>
        </div>
        <div class="user-settings">
            <h3>设置</h3>
            <div class="setting-item">
                <span>语言偏好</span>
                <select id="language-preference">
                    <option value="zh">中文</option>
                    <option value="en">英文</option>
                </select>
            </div>
            <div class="setting-item">
                <span>通知设置</span>
                <input type="checkbox" id="notification-setting" checked>
            </div>
        </div>
        <div class="user-history">
            <h3>使用历史</h3>
            <ul>
                <li>翻译记录: 100 次</li>
                <li>地图搜索: 50 次</li>
                <li>学习练习: 30 次</li>
            </ul>
        </div>
    </main>

    <!-- 底部导航栏 -->
    <footer class="bottom-nav">
        <a href="index.html" class="nav-item">首页</a>
        <a href="translation.html" class="nav-item">翻译</a>
        <a href="map.html" class="nav-item">地图</a>
        <a href="learning.html" class="nav-item">学习</a>
        <a href="profile.html" class="nav-item">我的</a>
    </footer>

    <script src="script.js"></script>
</body>
</html>